<template>
    <header>
      <nav>
        <h1>响应式数据</h1>
        <p id="No1">{{ str }}</p>
        <h1>NO1</h1>
        <p>
          {{ str }}
        </p>
        <p>
            {{ num }}
        </p>
        <!-- 按钮绑定事件 -->
        <button @click="num++">+</button>
        <button @click="click">-</button>
        <h2>{{ e }}</h2>
        <input type="text"  v-model="e" >
      </nav>
      
        
        
      
    </header>
  </template>
  <script lang="ts">
  export default {
    //响应式数据
    data() {
      name:"day1211StuDemo1"
      const str: string = '你好世界';
      let num: number = 10;
      let sum: number = 0;
      let e:string = "hello world";
      return {
        str,
        num,e
      }
    },
    methods: {// 定义方法
      click() {
        this.num--;
      }
   
  }
}

  </script>
  <style>
  /* header {
    border-bottom: 1px solid red;
    padding: 10px 0;
    background-color: pink;
  } */
  nav {
    width: 100%;
    font-size: 12px;
    text-align: center;
    a {
      display: inline-block;
      padding: 0 1rem;
      border-left: 1px solid black;
      color: blue;
    }
  }
  #No1 {
    font-size: 20px;
    color: red;
  }
  </style>